const ruler = {
  /**
   * 初始化刻度尺插件
   * @el 容器 String
   * @height 刻度尺高度 Number
   * @maxScale 最大刻度 Number
   * @startValue 开始的值 Number
   * @region 区间 Array
   * @background 刻度尺背景颜色 String
   * @color 刻度线和字体的颜色 String
   * @markColor  中心刻度标记颜色 String
   * @isConstant 是否不断地获取值 Boolean
   * @success(res) 滑动结束后的回调 Function
   * */
  initPlugin: function (params) {
    const initParams = {
      el: params.el,
      height: params.height || 60,
      maxScale: params.maxScale || 1000,
      startValue: params.startValue || 0,
      region: params.region || false,
      background: params.background || false,
      color: params.color || false,
      markColor: params.markColor || "#FFCC33",
      isConstant: params.isConstant || false,
    };

    if (!initParams.el) {
      console.warn("没有容器元素的参数");
      return false;
    }

    const rulerWrap = document.getElementById(initParams.el); //获取容器
    rulerWrap.style.height =
      initParams.height < 50 ? 50 + "px" : initParams.height + "px";

    //最大刻度的小值是50
    initParams.maxScale = initParams.maxScale < 50 ? 50 : initParams.maxScale;

    if (initParams.startValue > initParams.maxScale) {
      initParams.startValue = initParams.maxScale;
    }

    if (initParams.region) {
      minSildeNum = Math.floor(initParams.region[0]);
      maxSildeNum = Math.floor(initParams.region[1]);
    }

    let count = initParams.startValue; //初始值

    let winWidth = rulerWrap.offsetWidth; //容器宽度
    let division = winWidth / 100; //每个刻度的距离 分割线
    console.log("winWidth", winWidth);
    //刻度值数组
    let scaleValueList = [];
    for (let i = 0; i <= initParams.maxScale; i += 10) {
      scaleValueList.push(i);
    }

    let canvas = rulerWrap.getElementsByTagName("canvas")[0]; //获取容器下的canvas标签
    //没有canvas就创建一个
    if (!canvas) {
      canvas = document.createElement("canvas"); //创建canvas标签
      canvas.width = winWidth;
      canvas.height = initParams.height;
      rulerWrap.appendChild(canvas);
    }
    const cxt = canvas.getContext("2d");

    if (window.devicePixelRatio) {
      canvas.width = window.devicePixelRatio * winWidth;
      canvas.height = window.devicePixelRatio * initParams.height;
      cxt.scale(window.devicePixelRatio, window.devicePixelRatio);
    }

    //画刻度尺
    function drawRuler(count) {
      //清空画布
      cxt.clearRect(0, 0, winWidth, initParams.height);

      //刻度尺背景
      if (initParams.background) {
        cxt.fillStyle = initParams.background;
        cxt.fillRect(0, 0, canvas.width, initParams.height);
      }

      //画刻度线
      for (let i = 0; i < initParams.maxScale; i++) {
        cxt.beginPath();
        cxt.save();
        cxt.strokeStyle = initParams.color ? initParams.color : "#bbb";
        cxt.lineWidth = 1;
        cxt.lineCap = "round";
        cxt.moveTo(division * i - count * division, 0);
        cxt.lineTo(
          division * i - count * division,
          Math.floor(initParams.height * 0.3)
        );

        if (i % 5 === 0) {
          cxt.strokeStyle = initParams.color ? initParams.color : "#999";
          cxt.lineTo(
            division * i - count * division,
            Math.floor(initParams.height * 0.35)
          );
        }
        if (i % 10 === 0) {
          cxt.strokeStyle = initParams.color ? initParams.color : "#666";
          cxt.lineTo(
            division * i - count * division,
            Math.floor(initParams.height * 0.52)
          );
        }

        cxt.stroke();
        cxt.restore();
        cxt.closePath();
      }

      //添加数字
      cxt.beginPath();
      cxt.font = "14px Arial";
      cxt.fillStyle = initParams.color ? initParams.color : "#333";
      cxt.textAlign = "center";
      cxt.textBaseline = "middle";
      scaleValueList.forEach(function (num, i) {
        // 开头和结尾
        if (i === 0) {
          cxt.fillText(
            num.toString(),
            division * i * 10 - count * division + 5,
            Math.floor(initParams.height * 0.78)
          );
        } else if (i === scaleValueList.length - 1) {
          console.log("走了吗",division * i * 10 - count * division - 10);
          cxt.fillText(
            num.toString(),
            division * i * 10 - count * division - 10,
            Math.floor(initParams.height * 0.78)
          );
        } else {
          cxt.fillText(
            num.toString(),
            division * i * 10 - count * division,
            Math.floor(initParams.height * 0.78)
          );
        }
      });
      cxt.closePath();

      //中心刻度线
      //   cxt.beginPath();
      //   cxt.save();
      //   cxt.strokeStyle = initParams.markColor;
      //   cxt.lineWidth = 2;
      //   cxt.lineCap = "round";
      //   cxt.moveTo((winWidth / 2), 0);
      //   cxt.lineTo(0, Math.floor(initParams.height * 0.52));
      //   cxt.stroke();
      //   cxt.restore();
      //   cxt.closePath();
    }

    if (window.devicePixelRatio) {
      canvas.style.transform = "scale(" + 1 / window.devicePixelRatio + ")";
      canvas.style.transformOrigin = "left top";
    }

    drawRuler(count);
  },
};
